<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="Assets">
				<view class="Assets-warp">
					<view class="Assets-warp-title">
						<view class="name">
							我的能量:{{points}}
						</view>
					</view>
					<view class="Assets-warp-btn">
						<navigator class="my-detail" url="/pages/user/integral/detail" hover-class="none">
							能量明细
						</navigator>
						<view class="bordershu"></view>
						<navigator class="my-detail" url="/pages/user/integral/record" hover-class="none">
							我的订单
						</navigator>
						<view class="bordershu"></view>
						<navigator class="my-detail" url="/pages/user/integral/activity" hover-class="none">
							能量活动
						</navigator>
					</view>
					<view class="" v-if="sign_in_status">
						<steps :options.sync="options" :is_sign_in.sync='is_sign_in' :active.sync="continue_days"></steps>
					</view>
				</view>
			</view>
			<view class="content">
<!-- 				<view class="title">
					
				</view> -->
				<!-- 默认排序 -->
				<scroll-view scroll-y="true" class="CommodityList-warp" @scrolltolower="addshop">
					<view class="CommodityList" v-if="bankList.length > 0">
						<view class="item" v-for="(item,index) in bankList" :key="index"
							@click="nav_Data(item.goods_id,item.goods_price)">
							<view class="img">
								<img :src="item.goods_img" alt="">
							</view>
							<view class="name twoOver">
								{{item.goods_name}}
							</view>
							<view class="money">
								{{item.goods_price}} 能量
							</view>
						</view>
					</view>
					<view v-else>
						<view class="yoshop-notcont">
							<text class="iconfont icon-wushuju"></text>
							<text class="cont">暂无商品</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				bankList: [], //
				page: 1,
				points: '',
				last_page: 1, //总页数
				list: [],
				loading: true,
				hasMore: false,
				options: [],
				is_sign_in:0,//0--未签 1--已签
				continue_days:0,//连续签到
				sign_in_status:0,//签到状态
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			console.log(options.token)
			this.getBankList()
			
		},
		onShow() {
			// this.getBankList()、
			this.getSignInCfg()
		},
		onPullDownRefresh() {
			this.getBankList(() => {
				uni.stopPullDownRefresh();
			})
		},
		//触底加载
		onReachBottom() {
			console.log('触底')
			// 已经是最后一页
			if (this.page >= this.last_page) {
				app.showToast('已经到底了哦~');
			} else {
				this.page = ++this.page
				this.getBankList(true);
			} // 加载下一页列表
			console.log(this.page)

		},
		methods: {
			//签到信息
			getSignInCfg() {
				let _this = this
				app._post_form('Jadegoods/getSignInCfg', {}, function(result) {
					if (1 == result.code) {
						console.log(result)
						_this.options = result.data.cfg
						_this.is_sign_in = result.data.is_sign_in
						_this.continue_days = result.data.continue_days
						_this.sign_in_status = result.data.status
						
					}
				}, null, function() {
					// 解除按钮禁用
					uni.stopPullDownRefresh();
					// app.showError(result.msg);
				});
			},
			addshop() {
				if (this.page >= this.last_page) {
					app.showToast('已经到底了哦~');
				} else {
					this.page = ++this.page
					this.getBankList(true);
				} // 加载下一页列表
				console.log(this.page)
				// if (this.hasMore) {
				// 	this.getBankList()
				// }
			},
			getBankList() {
				let _this = this
				app._post_form('Jadegoods/lists', {
					limit: 10,
					page: _this.page,
				}, function(result) {
					if (1 == result.code) {
						_this.points = result.data.points
						_this.last_page = result.data.list.last_page
						let a = result.data.list
						console.log(a.data)
						a.data.forEach((item) => {
							_this.bankList.push(item)
						})

					}
				}, null, function() {
					// 解除按钮禁用
					uni.stopPullDownRefresh();
					// app.showError(result.msg);
				});
			},
			nav_Data(e, i) {
				if (this.points > i - 1) {
					uni.navigateTo({
						url: `./Data?goods_id=${e}&is=1 `
					});
				} else {
					//能量不足
					uni.navigateTo({
						url: `./Data?goods_id=${e}&is=0 `
					});
				}

			},
			//跳转订单记录
			nav_record() {
				uni.navigateTo({
					url: `./record`
				});
			},
			//
			nav_activity() {
				console.log(111)
				uni.navigateTo({
					url: `./activity`
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #171819;
		overflow: hidden;
		min-height: 100vh;

		.Assets {
			display: flex;
			justify-content: center;
			padding-top: 120rpx;

			.Assets-warp {
				width: 684rpx;
				padding-bottom: 40rpx;
				// height: 288rpx;
				border-radius: 30rpx;
				// background-image: url(@/static/images/shopbgA.png);
				background-color: #202122;
				background-size: 100% 100%;

				.Assets-warp-title {
					display: flex;
					justify-content: space-between;
					margin: 24rpx 27rpx;

					font-size: 30rpx;
					font-weight: bold;
					color: #FFFFFF;

					.detail {
						width: 158rpx;
						height: 58rpx;
						// background-image: url(@/static/images/shopbgB.png);
						background-size: 100% 100%;
						font-size: 28rpx;
						display: flex;
						justify-content: center;
						padding-top: 10rpx;
						margin-right: -40rpx;
					}

					.name {
						background-color: #313233;
					}
				}

				.Assets-warp-btn {
					display: flex;
					justify-content: space-around;
					margin-top: 80rpx;
					// padding: 0 80rpx;
					font-size: 30rpx;
					color: #FFF;

					.bordershu {
						border: 1rpx solid #524838;
						// width: 1rpx;
						height: 38rpx;
					}
				}

				.steps {
					margin-top: 40rpx;
				}
			}
		}

		.content {
			padding: 10rpx 32rpx;
			height: calc(100vh - 310rpx);
			// background: #161819;
			// background-image: url(@/static/images/shopbg.png);
			background-size: 100% 100%;
			// margin-top: -118rpx;
			position: relative;

			.title {
				display: flex;
				font-size: 30rpx;
				justify-content: space-around;
				font-weight: bold;
				height: 116rpx;
				line-height: 116rpx;
				// border-bottom: 1rpx solid rgba(51, 51, 51, 0.1200);
				font-size: 30rpx;
				color: #FFFFFF;
				// margin-top: 96rpx;

			}

			.CommodityList-warp {
				height: 1140rpx;
				padding-bottom: 50rpx;
			}

			.CommodityList {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				overflow-y: scroll;
				padding-bottom: 200rpx;

				.item {
					margin-top: 32rpx;
					width: 328rpx;
					height: 396rpx;
					background: #2D2B2C;
					border-radius: 8rpx;

					.img {
						width: 100%;
						height: 236rpx;

						img {
							object-fit: cover !important;
							width: 100%;
							height: 100%;
							border-radius: 10rpx;
						}
					}

					.name {
						text-align: center;
						width: 100%;
						height: 80rpx;
						margin-top: 12rpx;
						letter-spacing: 2rpx;
						// background-color: #313233;
						font-size: 30rpx;
						color: #FFFFFF;
						// margin-left: 16rpx;
					}

					.money {
						text-align: center;
						margin-top: 8rpx;
						// margin-left: 16rpx;
						color: #D8B255;
						font-size: 30rpx;
						font-weight: bold;
						// margin-left: 30rpx;
					}
				}
			}
		}

	}
</style>
